<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            margin: 0 auto;
        }

        ul li {
            list-style: none;
            float: left;
            width: 100px;
            height: 50px;
            text-align: center;
            border: solid 1px black;
            line-height: 50px;
        }

        ol li {
            list-style: none;
            text-align: center;
            font-size: 20px;
            float: left;
            display: none;
        }

        .show {
            display: block;
        }

        .active {
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="one">
        <ul>
            <li>用户管理</li>
            <li>商品管理</li>
            <li>角色管理</li>
            <li>配置管理</li>
        </ul>
        <ol>
            <li>用户管理</li>
            <li>商品管理</li>
            <li>角色管理</li>
            <li>配置管理</li>
        </ol>
    </div>
    <div id="two">
        <ul>
            <li>用户管理</li>
            <li>商品管理</li>
            <li>角色管理</li>
            <li>配置管理</li>
        </ul>
        <ol>
            <li>用户管理</li>
            <li>商品管理</li>
            <li>角色管理</li>
            <li>配置管理</li>
        </ol>
    </div>
    <script>
        // function Tabel() {
        //     this.list = document.querySelectorAll('div>ul>li')
        //     this.olist = document.querySelectorAll('div>ol>li')
        // }
        //     //在tabele
            
        // Tabel.prototype.remove = function () {
        //         for (let i = 0; i < this.list.length; i++) {
        //             this.list[i].classList.remove('active')
        //             this.olist[i].classList.remove('show')

        //         }
        //     }

        //         //在table圆形对象里构造改变颜色方法
        //         Tabel.prototype.changecolor = function () {
        //             let _this = this
        //             for (let i = 0; i < this.list.length; i++) {
        //                 this.list[i].addEventListener('click', function () {
        //                     _this.remove()
        //                     //console.log( _this.olist[0]);
        //                     _this.olist[i].classList.add('show')
        //                     this.classList.add('active')
        //                 })
        //             }
        //         }
             

            

        //         let tabel1 = new Tabel()
        //        // tabel1.changecolor()
        //        console.dir(tabel1.__proto__.__proto__)
                class Tabel{
                    constructor(id){
                        this.div=document.querySelector(id)
                        this.lis=this.div.querySelectorAll('ul>li')
                        this.ols=this.div.querySelectorAll('ol>li')
                    }
                    clear(){
                        for(let i=0;i<this.lis.length;i++){
                            this.lis[i].classList.remove('active')
                             this.ols[i].classList.remove('show')
                        }
                    }
                    changcolor(){
                        let _this=this
                        for (let i = 0; i < this.lis.length; i++){
                           this.lis[i].addEventListener('click',function(){
                               console.log(this)
                                _this.clear()
                                this.classList.add('active')
                                _this.ols[i].classList.add('show')
                                  
                           })
                            
                        }
                    }
                }
            let tabel1=new Tabel('#one')
            tabel1.changcolor()
            let tabel2=new Tabel('#two')
            tabel2.changcolor()
    </script>
</body>

</html>